<template>
    <div class="content">
        <h1>Button</h1>
        <p>常用的操作按钮。</p>
    </div>
    <div class="content">
        <h2>Theme</h2>
        <p>使用 theme 属性来定义 Button 的样式。</p>
        <Button>默认按钮</Button>
        <Button theme="button">普通按钮</Button>
        <Button theme="link">链接按钮</Button>
        <Button theme="text">文字按钮</Button>
    </div>
    <div class="content">
        <h2>Size</h2>
        <p>Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。</p>
        <div>
            <Button size="big">大大大按钮</Button>
            <Button>普普通按钮</Button>
            <Button size="small">小小小按钮</Button>
        </div>
        <div>
            <Button theme="button" size="big">大大大按钮</Button>
            <Button theme="button">普普通按钮</Button>
            <Button theme="button" size="small">小小小按钮</Button>
        </div>
        <div>
            <Button theme="link" size="big">大大大按钮</Button>
            <Button theme="link">普普通按钮</Button>
            <Button theme="link" size="small">小小小按钮</Button>
        </div>
        <div>
            <Button theme="text" size="big">大大大按钮</Button>
            <Button theme="text">普普通按钮</Button>
            <Button theme="text" size="small">小小小按钮</Button>
        </div>
    </div>
    <div class="content">
        <h2>Level</h2>
        <p>level的值为 main / normal / danger</p>
        <div>
            <Button>normal按钮</Button>
            <Button level="main">main按钮</Button>
            <Button level="danger">danger按钮</Button>
        </div>
    </div>
    <div class="content">
        <h2>Disable</h2>
        <p>按钮是否禁用</p>
        <div>
            <Button disabled>禁用按钮</Button>
            <Button theme="button" disabled>禁用按钮</Button>
            <Button theme="link" disabled>禁用链接按钮</Button>
            <Button theme="text" disabled>禁用文本按钮</Button>
        </div>
    </div>
    <div class="content">
        <h2>Loading</h2>
        <p>按钮是否加载中Loading,布尔值是or否</p>
        <div>
            <Button loading disabled>按钮-加载中</Button>
            <Button loading theme="button">按钮-加载中</Button>
            <Button>加载完毕</Button>
        </div>
    </div>
    <div>
    </div>
    <div class="page">
        <p class="fl">上一步：
            <router-link to="/doc/switch">Switch 组件</router-link>
        </p>
        <p class="fr">下一节：
            <router-link to="/doc/dialog">Dialog 组件</router-link>
        </p>
    </div>
</template>

<script lang="ts">
    import Button from "../lib/Button.vue";

    export default {
        name: 'ButtonDemo',
        components: {Button},
        setup() {
            const onClick = () => {
                console.log('hi');
            }
            return {onClick}
        }
    };
</script>

<style lang="scss" scoped>
    .content {
        margin-bottom: 40px;

        & > :first-child {
            margin-bottom: 20px;
            position: relative;
            z-index: -1;
        }

        & > p {
            /*margin-left: 20px;*/
            margin-bottom: 20px;
        }
    }

    .page {
        margin-top: 30px;

        a {
            color: #50a0ff;
        }
    }
</style>
